import React from 'react'
import { Modal, message } from 'antd'
import ProForm, { ProFormText } from '@ant-design/pro-form'
import { addUser } from '@/services/user' 


export default function Create(props) {

  const { isModalVisible, isShowModal, actionRef } = props

  // 点击提交 添加用户
  const createUser = async values => {
    // 发送请求，添加用户
    const response = await addUser(values)
    if(response.status === undefined) {
      message.success('添加用户成功!')
      // 刷新表格
      actionRef.current.reload()
      isShowModal(false)
    } else {
      message.error('添加用户失败!')
    }
  }

  return (
    <Modal title="添加用户" visible={isModalVisible} onCancel={() => {isShowModal(false)}} footer={null} destroyOnClose={true}>
      <ProForm
        onFinish={ (values) => createUser(values) }
      >
        <ProFormText
          name="name"
          label="昵称"
          placeholder="请输入昵称"
          rules={[
            { required: true, message: '请输入昵称!' }
          ]}
        />
        <ProFormText
          name="email"
          label="邮箱"
          placeholder="请输入邮箱"
          rules={[
            { required: true, message: '请输入邮箱!' },
            { type: 'email', message: '邮箱格式不正确!' }
          ]}
        />
        <ProFormText.Password
          name="password"
          label="密码"
          placeholder="请输入密码"
          rules={[
            { required: true, message: '请输入密码!' },
            { min: 6, message: '密码最少6位!' }
          ]}
        />
      </ProForm>
    </Modal>
  )
}
